<template>
  <el-dialog
    v-model="visible"
    :title="title"
    width="400px"
    :before-close="handleClose"
  >
    <div class="properties-content" v-if="item">
      <div class="property-section">
        <div class="property-icon">
          <el-icon size="48">
            <component :is="getFileIcon(item)" />
          </el-icon>
        </div>
        <div class="property-name">
          <h3>
            {{ item.name }}
          </h3>
          <p class="property-type">
            {{ getFileTypeDescription(item) }}
          </p>
        </div>
      </div>

      <el-divider />

      <div class="property-details">
        <div class="property-row">
          <span class="property-label">类型:</span>
          <span class="property-value">{{
            item.type === "folder" ? "文件夹" : "文件"
          }}</span>
        </div>

        <div class="property-row" v-if="item.type === 'file' && item.size">
          <span class="property-label">大小:</span>
          <span class="property-value">{{ item.size }}</span>
        </div>

        <div class="property-row">
          <span class="property-label">位置:</span>
          <span class="property-value">{{ getDirectory(item.path) }}</span>
        </div>

        <div class="property-row">
          <span class="property-label">修改时间:</span>
          <span class="property-value">{{
            formatDate(item.modifiedDate)
          }}</span>
        </div>

        <div class="property-row" v-if="item.type === 'file' && item.extension">
          <span class="property-label">扩展名:</span>
          <span class="property-value">{{ item.extension.toUpperCase() }}</span>
        </div>
      </div>

      <el-divider />

      <div class="property-attributes">
        <h4>属性</h4>
        <el-checkbox v-model="isReadOnly" disabled>只读</el-checkbox>
        <el-checkbox v-model="isHidden" disabled>隐藏</el-checkbox>
        <el-checkbox v-model="isSystem" disabled>系统</el-checkbox>
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
        <el-button type="primary" @click="handleOk">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import {
  Folder,
  Document,
  Picture,
  VideoCamera,
  Headset,
  DocumentCopy,
} from "@element-plus/icons-vue";
import {
  getFileTypeInfo,
  formatDate as utilFormatDate,
} from "../utils/fileUtils";

interface FileItem {
  name: string;
  type: "file" | "folder";
  size?: string;
  modifiedDate: string;
  extension?: string;
  path: string;
}

const props = defineProps<{
  modelValue: boolean;
  item?: FileItem | null;
}>();

const emit = defineEmits<{
  "update:modelValue": [value: boolean];
  ok: [];
}>();

const visible = computed({
  get: () => props.modelValue,
  set: value => emit("update:modelValue", value),
});

const title = computed(() => {
  return props.item ? `${props.item.name} 属性` : "属性";
});

// 模拟属性
const isReadOnly = ref(false);
const isHidden = ref(false);
const isSystem = ref(false);

const getFileIcon = (item: FileItem) => {
  if (item.type === "folder") {
    return Folder;
  }

  const ext = item.extension?.toLowerCase();
  switch (ext) {
    case "jpg":
    case "jpeg":
    case "png":
    case "gif":
      return Picture;
    case "mp4":
    case "avi":
    case "mov":
      return VideoCamera;
    case "mp3":
    case "wav":
    case "flac":
      return Headset;
    case "pdf":
    case "docx":
    case "doc":
    case "txt":
      return DocumentCopy;
    default:
      return Document;
  }
};

const getFileTypeDescription = (item: FileItem) => {
  if (item.type === "folder") {
    return "文件夹";
  }

  if (item.extension) {
    const typeInfo = getFileTypeInfo(item.extension);
    return typeInfo.description;
  }

  return "文件";
};

const getDirectory = (filePath: string) => {
  const parts = filePath.split("\\");
  parts.pop(); // 移除文件名
  return parts.join("\\") || "\\";
};

const formatDate = (date: string) => {
  return utilFormatDate(date);
};

const handleClose = () => {
  visible.value = false;
};

const handleOk = () => {
  emit("ok");
  visible.value = false;
};
</script>

<style scoped>
.properties-content {
  padding: 8px 0;
}

.property-section {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.property-icon {
  margin-right: 16px;
}

.property-name h3 {
  margin: 0 0 4px 0;
  font-size: 16px;
  color: #333;
}

.property-type {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.property-details {
  margin: 16px 0;
}

.property-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 14px;
}

.property-label {
  color: #666;
  min-width: 80px;
}

.property-value {
  color: #333;
  flex: 1;
  text-align: right;
  word-break: break-all;
}

.property-attributes {
  margin-top: 16px;
}

.property-attributes h4 {
  margin: 0 0 12px 0;
  font-size: 14px;
  color: #333;
}

.property-attributes .el-checkbox {
  display: block;
  margin-bottom: 8px;
}
</style>
